/* 自定义打包规则 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    /* 基础规则 */
    // 模式:开发模式development & 生产模式production
    mode: "production",
    // 打包入口{支持相对路径}
    entry: './src/main.js',
    // 打包出口{只能是绝对路径}
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash:8].min.js'
    },
    /* 使用插件 */
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: true
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[hash:8].min.css"
        })
    ],
    /* 使用加载器 */
    module: {
        rules: [
            // 处理CSS相关的{含LESS等处理}
            {
                test: /\.(css|less)$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader", //不常用{内嵌样式}
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            // 处理JS
            {
                test: /\.(js|jsx)$/i,
                use: [
                    "babel-loader"
                ],
                exclude: /node_modules/,
                // include: path.resolve(__dirname, 'src')
            },
            // 处理图片
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 100000
                    }
                }]
            },
            {
                test: /\.(svg|eot|ttf|woff|woff2)$/i,
                use: [
                    "file-loader"
                ]
            }
        ]
    },
    /* 优化项 */
    optimization: {
        minimizer: [
            new CssMinimizerWebpackPlugin(),
            new TerserPlugin()
        ]
    },
    /* 解析器 */
    resolve: {
        alias: {
            "@": path.resolve(__dirname, 'src')
        }
    },
    /* WEBPACK-DEV-SERVER的配置 */
    devServer: {
        host: '127.0.0.1',
        port: 8080,
        open: true,
        hot: true,
        compress: true,
        // 跨域代理
        // @1 '/A或/B'只是设置的请求前缀，代理服务会基于不同的请求前缀，帮我们代理到不同的服务器「一般情况下，请求地址中的前缀，在真正的请求地址中是不存在的」
        proxy: {
            '/A': {
                target: 'https://www.jianshu.com/asimov',
                changeOrigin: true,
                ws: true,
                // secure: false,
                pathRewrite: {
                    '^/A': ''
                }
            },
            '/B': {
                target: 'https://news-at.zhihu.com/api/4',
                changeOrigin: true,
                ws: true,
                pathRewrite: { '^/B': '' }
            }
        }
    }
};

/* 兼容处理 */
// @1 基于postcss-loader「webpack配置项中」 & autoprefixer「postcss.config.js」 & browserslist「package.json」: 根据指定兼容的浏览器，自动为CSS3样式属性设置相关的前缀，以此来实现浏览器的兼容性！！
// @2 基于babel-loader「webpack配置项中」& @babel/preset-env「babel.config.js」& browserslist「package.json」：基于babel把ES6“语法”转换为ES5语法，以此实现IE浏览器的兼容！！
// @3 对于ES6内置API，babel语法包是无法转换的，此时需要基于 @babel/polyfill 来处理「在入口导入@babel/polyfill，其中包含了常用ES6内置API的重写」